<el-form label-width="55px">
    <el-tabs v-model="set">
        <el-tab-pane label="表单信息" name="form">
            <template  v-if="fieldForm != ''">
                <el-form-item prop="prop">
                    <template v-slot:label>
                        <el-tooltip content="请慎重修改，数据表字段列名" placement="top">
                            <i>字段：</i>
                        </el-tooltip>
                    </template>
                    <el-input v-model="fieldForm.prop"></el-input>
                </el-form-item>
                <el-form-item prop="label">
                    <template v-slot:label>
                        <el-tooltip content="表格/表单继承此标题" placement="top">
                            <i>标题：</i>
                        </el-tooltip>
                    </template>
                    <el-input v-model="fieldForm.label"></el-input>
                </el-form-item>
                <el-form-item prop="formShow">
                    <template v-slot:label>
                        <el-tooltip content="不显示则表单中不会出现此字段，演示只是做隐藏处理" placement="top">
                            <i>显示：</i>
                        </el-tooltip>
                    </template>
                    <el-switch v-model="fieldForm.formShow"></el-switch>
                </el-form-item>
                <el-form-item label="组件：" prop="is">
                    <el-select v-model="fieldForm.is" @change="isChange()" filterable>
                        <el-option label="输入框" value="el-input"></el-option>
                        <el-option label="编辑器" value="el-editor"></el-option>
                        <el-option label="单选框" value="el-radio-group"></el-option>
                        <el-option label="多选框" value="el-checkbox-group"></el-option>
                        <el-option label="选择框" value="el-select"></el-option>
                        <el-option label="文件选择" value="el-file-select"></el-option>
                        <el-option label="多文件选择" value="el-file-list-select"></el-option>
                        <el-option label="开关" value="el-switch"></el-option>
                        <el-option label="日期时间选择器" value="el-date-picker"></el-option>
                        <el-option label="时间选择器" value="el-time-select"></el-option>
                        <el-option label="计数器" value="el-input-number"></el-option>
                        <el-option label="级联选择器（多级联动）" value="el-cascader"></el-option>
                        <el-option label="滑块" value="el-slider"></el-option>
                        <el-option label="评分" value="el-rate"></el-option>
                        <el-option label="颜色选择器" value="el-color-picker"></el-option>
                        <el-option label="链接选择" value="el-link-select"></el-option>
                        <el-option label="自定义参数" value="el-parameter"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="placeholder" v-if="fieldForm.is == 'el-input' || fieldForm.is == 'el-editor' || fieldForm.is == 'el-select'">
                    <template v-slot:label>
                        <el-tooltip content="表单占用提示信息" placement="top">
                            <i>提示：</i>
                        </el-tooltip>
                    </template>
                    <el-input v-model="fieldForm.placeholder"></el-input>
                </el-form-item>
                <el-form-item prop="tips">
                    <template v-slot:label>
                        <el-tooltip content="表单下方指示信息，引导作用" placement="top">
                            <i>tips：</i>
                        </el-tooltip>
                    </template>
                    <el-input v-model="fieldForm.tips"></el-input>
                </el-form-item>
                <el-form-item 
                    prop="child" 
                    v-if="fieldForm.is == 'el-radio-group' || fieldForm.is == 'el-checkbox-group' || fieldForm.is == 'el-select'">
                    <template v-slot:label>
                        <el-tooltip content="单选框、多选框、选择框的子选项" placement="top">
                            <i>选项：</i>
                        </el-tooltip>
                    </template>
                    <el-parameter v-model="fieldForm.child" :rank="false" :push="false"></el-parameter>
                </el-form-item>
                <el-form-item 
                    label="类型：" 
                    prop="type" 
                    v-if="fieldForm.is == 'el-file-select' || fieldForm.is == 'el-file-list-select' || fieldForm.is == 'el-date-picker'">
                    <el-radio-group 
                        v-model="fieldForm.type" 
                        v-if="fieldForm.is == 'el-file-select' || fieldForm.is == 'el-file-list-select'">
                        <el-radio label="all">全部</el-radio>
                        <el-radio label="image">图片</el-radio>
                        <el-radio label="video">视频</el-radio>
                        <el-radio label="audio">音频</el-radio>
                        <el-radio label="word">文档</el-radio>
                        <el-radio label="other">其它</el-radio>
                    </el-radio-group>
                    <el-radio-group 
                        v-model="fieldForm.type" 
                        v-if="fieldForm.is == 'el-date-picker'">
                        <el-radio label="date">日期</el-radio>
                        <el-radio label="datetime">日期时间</el-radio>
                        <el-radio label="daterange">日期范围</el-radio>
                        <el-radio label="datetimerange">日期时间范围</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="fieldForm.is != 'el-link-select' && fieldForm.is != 'el-parameter'" prop="default">
                    <template v-slot:label>
                        <el-tooltip content="新增数据时，此字段的默认值" placement="top">
                            <i>默认：</i>
                        </el-tooltip>
                    </template>
                    <template v-if="fieldForm.is == 'el-switch'">
                        <el-radio-group v-model="fieldForm.default">
                            <el-radio :label="1">开启</el-radio>
                            <el-radio :label="0">关闭</el-radio>
                        </el-radio-group>
                    </template>
                    <template v-else>
                        <template v-if="typeof fieldForm.default == 'object'">
                            <el-input 
                                style="margin-bottom: 10px" 
                                v-for="(val,key) in fieldForm.default" 
                                v-model="fieldForm.default[key]" 
                                placeholder="请输入内容">
                                <el-button 
                                    slot="append" 
                                    icon="el-icon-delete-solid" 
                                    size="small"
                                    @click="fieldForm.default.splice(key, 1)">
                                </el-button>
                            </el-input>
                            <el-button 
                                icon="el-icon-plus" 
                                size="small"
                                @click="fieldForm.default.push('')"
                                circle>
                            </el-button>
                        </template>
                        <el-input v-else v-model="fieldForm.default"></el-input>
                    </template>
                </el-form-item>
                <el-form-item prop="multiple" v-if="fieldForm.is == 'el-select'">
                    <template v-slot:label>
                        <el-tooltip content="当组件为选择框时，可指定是否能选多个项目" placement="top">
                            <i>多选：</i>
                        </el-tooltip>
                    </template>
                    <el-switch v-model="fieldForm.multiple"></el-switch>
                </el-form-item>
                <el-form-item prop="filterable" v-if="fieldForm.is == 'el-select'">
                    <template v-slot:label>
                        <el-tooltip content="当组件为选择框时，可指定是否能搜索项目" placement="top">
                            <i>搜索：</i>
                        </el-tooltip>
                    </template>
                    <el-switch v-model="fieldForm.filterable"></el-switch>
                </el-form-item>
                <el-form-item label="必填：" prop="required">
                    <el-switch v-model="fieldForm.required"></el-switch>
                </el-form-item>
                <el-form-item label="禁用：" prop="disabled">
                    <el-switch v-model="fieldForm.disabled"></el-switch>
                </el-form-item>
                <el-form-item prop="colMd">
                    <template v-slot:label>
                        <el-tooltip content="栅格化布局，1/2代表2个表单为1行以此类推，为空则继承父级" placement="top">
                            <i>栅格：</i>
                        </el-tooltip>
                    </template>
                    <el-radio-group v-model="fieldForm.colMd">
                        <el-radio label="">继承</el-radio>
                        <el-radio :label="24">1&nbsp;/&nbsp;1</el-radio>
                        <el-radio :label="12">1&nbsp;/&nbsp;2</el-radio>
                        <el-radio :label="8">1&nbsp;/&nbsp;3</el-radio>
                        <el-radio :label="6">1&nbsp;/&nbsp;4</el-radio>
                        <el-radio :label="4">1&nbsp;/&nbsp;6</el-radio>
                        <el-radio :label="2">1&nbsp;/&nbsp;12</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="pattern" v-if="fieldForm.is == 'el-input'">
                    <template v-slot:label>
                        <el-tooltip content="数据正则验证" placement="top">
                            <i>验证：</i>
                        </el-tooltip>
                    </template>
                    <el-radio-group v-model="fieldForm.pattern">
                        <el-radio label="/^1[3456789]\d{9}$/">手机</el-radio>
                        <el-radio label="/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/">邮箱</el-radio>
                        <el-radio label="/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/">身份证</el-radio>
                        <el-radio label="/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/">网址</el-radio>
                        <el-radio label="/^[\u0391-\uFFE5]+$/">纯中文</el-radio>
                        <el-radio label="/^[a-zA-Z]+$/">纯英文</el-radio>
                        <el-radio label="/^[0-9]*$/">纯字母</el-radio>
                    </el-radio-group>
                </el-form-item>
            </template>
            <el-empty v-else description="未选择字段"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="表格信息" name="table">
            <template  v-if="fieldForm != ''">
                <el-form-item prop="tableProp">
                    <template v-slot:label>
                        <el-tooltip placement="top">
                            <div slot="content">
                                显示其它字段内容，当前'{{fieldForm.prop}}'字段，但我想显示'c_{{fieldForm.prop}}'字段的内容
                            </div>
                            <i>字段：</i>
                        </el-tooltip>
                    </template>
                    <el-input v-model="fieldForm.tableProp"></el-input>
                </el-form-item>
                <el-form-item prop="tableLabel">
                    <template v-slot:label>
                        <el-tooltip placement="top">
                            <div slot="content">
                                显示其它字段标题，如'{{fieldForm.label}}'标题，但我想显示'自定义'标题
                            </div>
                            <i>标题：</i>
                        </el-tooltip>
                    </template>
                    <el-input v-model="fieldForm.tableLabel"></el-input>
                </el-form-item>
                <el-form-item prop="tableShow">
                    <template v-slot:label>
                        <el-tooltip content="不显示则表格中不会出现此字段，演示只是做隐藏处理" placement="top">
                            <i>显示：</i>
                        </el-tooltip>
                    </template>
                    <el-switch v-model="fieldForm.tableShow"></el-switch>
                </el-form-item>
                <el-form-item prop="tableSort">
                    <template v-slot:label>
                        <el-tooltip content="表格可根据此列排序" placement="top">
                            <i>排序：</i>
                        </el-tooltip>
                    </template>
                    <el-switch v-model="fieldForm.tableSort"></el-switch>
                </el-form-item>
                <el-form-item prop="width">
                    <template v-slot:label>
                        <el-tooltip content="表格占用列宽度，0代表自动宽度" placement="top">
                            <i>宽度：</i>
                        </el-tooltip>
                    </template>
                    <el-input type="number" v-model="fieldForm.width"></el-input>
                </el-form-item>
                <el-form-item prop="bind">
                    <template v-slot:label>
                        <el-tooltip content="此列绑定其它字段一起显示" placement="top">
                            <i>绑定：</i>
                        </el-tooltip>
                    </template>
                    <el-input 
                        style="margin-bottom: 10px" 
                        v-for="(val,key) in fieldForm.bind" 
                        v-model="fieldForm.bind[key]" 
                        placeholder="字段名称">
                        <el-button 
                            slot="append" 
                            icon="el-icon-delete-solid" 
                            size="small"
                            @click="fieldForm.bind.splice(key, 1)">
                        </el-button>
                    </el-input>
                    <el-button 
                        icon="el-icon-plus" 
                        size="small"
                        @click="fieldForm.bind.push('')"
                        circle>
                    </el-button>
                </el-form-item>
            </template>
            <el-empty v-else description="未选择字段"></el-empty>
        </el-tab-pane>
    </el-tabs>
</el-form>